<template>
	<view>
		<view class="" v-for="(item,index) in items" :key="index">
			<u-card :title="item.title" :sub-title="item.subTitle" :full="true" :border="false" :padding="20" margin="10rpx" :footBorderTop="false" :footStyle="footStyle" @click="toDetail(item)">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
						<view class="u-body-item-title u-font-sm u-line-3">{{item.content}}</view>
					<view class="u-image-container">
						<image :src="item.imageSrc"  class="u-body-item-image"></image>
					</view>
					</view>
				</view>
				<!-- <view class="" slot="foot">
					<u-icon name="thumb-up-fill" size="32" color="#2BC3C8" label="30 点赞" labelSize="24" class="u-m-r-30"></u-icon>
					<u-icon name="eye-fill" size="32" color="#2BC3C8" label="30 浏览" labelSize="24"></u-icon>
				</view> -->
			</u-card>
			<u-gap bgColor="#ededed" height="20"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				footStyle:{
					'paddingTop':'0rpx'
				},
				items: [
				        {
				          title: '“你室友……”“你怎么知道我室友可好了！”',
				          subTitle: '2023-08-20',
				          content: 'O.o',
				          imageSrc: '/static/good.jpg',
				          likeCount: 30,
				          viewCount: 100
				        },
				        {
				          title: '新生报到须知',
				          subTitle: '2023-08-16',
				          content: 'o.O',
				          imageSrc: '/static/1.jpg',
				          likeCount: 20,
				          viewCount: 80
				        },
						{
						  title: '萌新指南|重大网站汇总',
						  subTitle: '2023-08-19',
						  content: 'O.O',
						  imageSrc: '/static/tipweb.jpg',
						  likeCount: 20,
						  viewCount: 80
						},
						{
						  title: '萌新指南|CQU教学楼',
						  subTitle: '2023-08-19',
						  content: 'QAQ',
						  imageSrc: '/static/cqubuilding.jpg',
						  likeCount: 20,
						  viewCount: 80
						},
				        // 添加其他循环项...
				      ]
				    };
				  },
				  methods: {
				    toDetail(item) {
				      // 根据循环项的不同数据，跳转到不同的页面
					  console.log("6",item.content);
				      if (item.content === 'O.o') {
				        this.$common.navigateTo('/pages/index/detail');
						console.log("6");
				      } else if (item.content === 'o.O') {
				        this.$common.navigateTo('/pages/index/freshman1');
				      } else if (item.content === 'O.O') {
				        this.$common.navigateTo('/pages/index/freshman2');
				      }
					  else if (item.content === 'QAQ') {
					    this.$common.navigateTo('/pages/index/freshman3');
					  }
				    }
				  }
				};
				</script>
				
				<style lang="scss" scoped>
				.u-card-wrap {
				  background-color: $u-bg-color;
				  padding: 1px;
				}
				
				.u-body-item {
				  font-size: 32rpx;
				  color: #333;
				  padding: 20rpx 10rpx;
				  display: flex; /* 添加 flex 布局 */
				justify-content: space-between; /* 图片和内容之间产生空白，实现右对齐 */
				}
				
				.u-image-container {
				  flex: 0 0 auto; /* 让图片容器不占用多余的空间 */
				  width: 1200rpx; /* 设置容器宽度，可以根据需要进行微调 */
				  height: 120rpx; /* 设置容器高度，保持和宽度相等 */
				}
				
				.u-body-item-image {
				  width: 200rpx;
				  height: 120rpx;
				  border-radius: 8rpx;
				  
				  object-fit: cover; /* 设置图片等比例缩放，保持图片填满容器 */
				}
				</style>
				
		
